<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>第1次作业题目二</title>
    <link rel="stylesheet" href="homework2.css">

</head>

<body>
    <div id="banlance">
        <h4 style="color:blue; ">&nbsp;&nbsp;&nbsp;欢迎注册会员</h4>
        <div>
            <form action="homework2 exam1.html" method="get">
                <div><label for="text1">手机号码：</label>
                    <input type="text" id="text1" placeholder="11位手机号" name="telenum">
                    <span style="color:red;">必填</span>
                </div>
                <div>
                    <label for="text2">创建密码：</label>
                    <input type="password" id="text2" placeholder="8位密码" name="psd">
                    <span style="color:red;">必填</span>
                </div>
                <div>
                    <label for="text3">注册邮箱：</label>
                    <input type="text" id="text3" placeholder="例如:wustzz@sina.com" name="email">
                    <span style="color:red;">必填</span>
                </div>
                <div id="check1">
                    <label for="text4">&nbsp;&nbsp;&nbsp;&nbsp;验证码：</label>
                    <input type="text" id="text4" name="check">
                    <span id="capcha">验证码</span>
                    <img src="images/arrow_03.png" id="change_capcha" alt="" />
                </div>
                <script>
                    //验证码：由大小写字母或数字组成
                    let codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
                    //验证码长度
                    let length = 4;
                    let capcha = document.getElementById("capcha");
                    let change_capcha = document.getElementById("change_capcha");
                    // 用来生成一个[n,m]随机整数
                    function getRandom(n, m) {
                        return parseInt(Math.random() * (m - n + 1) + n);
                    }
                    // 将随机生成的整数下标对应的字母放入span中
                    function getCode() {
                        let str = "";
                        // 验证码有几位就循环几次
                        for (let i = 0; i < length; i++) {
                            let index = getRandom(0, 61);
                            str += codeStr.charAt(index);
                        }
                        capcha.innerHTML = str;
                    }
                    // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
                    getCode();
                    // 点击刷新验证码
                    capcha.addEventListener("click", getCode);
                    change_capcha.addEventListener("click", getCode);
                </script>
                <div>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别：
                        <input type="radio" name="sex" value="male" checked="checked" id="sexname"> 男
                    </label>
                    <label>
                        <input type="radio" name="sex" value="female" id="sexname"> 女
                    </label>
                </div>
                <div>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：
                        <input type="date" name="mydate">
                    </label>
                </div>
                <div>
                    <label for="text5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：</label>
                    <input type="text" id="text5" name="old">
                </div>
                <div>
                    <label for="text6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：</label>
                    <select name="birthplace1" id="text6">
                        <option value="0">湖北省</option>
                        <option value="1">江苏省</option>
                        <option value="2">湖南省</option>
                        <option value="3">山东省</option>
                    </select>
                    <select name="birthplace2" id="text6">
                        <option value="0">武汉市</option>
                        <option value="1">济南市</option>
                        <option value="2">无锡市</option>
                        <option value="3">长沙市</option>
                    </select>
                </div>
                <div>
                    <label for="text7">个人学历：</label>
                    <select name="school" id="text7">
                        <option value="0">本科</option>
                        <option value="1">硕士</option>
                        <option value="2">博士</option>
                        <option value="3">高中</option>

                    </select>
                </div>
                <div>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月薪：</label>
                    <input type="range" id="score" name="money" min="0" max="5000" step="100" value="2500">
                    <span id="msg"></span>
                </div>
                <div><label>个人爱好：</label>
                    <label>
                        <input type="checkbox" name="like" value="football" id="favor">唱歌
                    </label>
                    <label>
                        <input type="checkbox" name="like" value="basketball" id="favor">跑步
                    </label><label>
                        <input type="checkbox" name="like" value="football" id="favor">游泳
                    </label>
                </div>
<span></span>
                <label>个人照片：</label>

                <input type="file" id="test-image-file" name="file">

                <span method="post" action="#" enctype="multipart/form-data">
                    <p></p>
                    <div id="test-image-preview">
                    </div>
                    <p></p>

                    <p id="test-file-info"></p>
                </span>
                <div>
                    <label for="sid" id="intro">个人简介：</label>
                </div>
                <textarea name="intro" cols="30" rows="10" id="sid"></textarea>
                <div>
                    <br>
                    <input type="submit" value="提交" id="sr">

                    <input type="reset" value="重填" id="sr">
                </div>
            </form>
        </div>
    </div>
</body>
<script>
    var msg = document.getElementById("msg");
    window.onload = function () {
        msg.innerHTML = document.getElementById("score").value;
    }
    document.getElementById("score").onchange = function () {
        msg.innerHTML = this.value;
    }
</script>
<script>
    var fileInput = document.getElementById('test-image-file');
    var info = document.getElementById('test-file-info');
    var preview = document.getElementById('test-image-preview');
    fileInput.addEventListener('change', function () { // 监听change事件
        preview.style.backgroundImage = ''; // 清除背景图片
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) { // 发起一个异步操作来读取文件内容
            var data = e.target.result; // data串形如： '...(base64编码)...' 
            preview.style.backgroundImage = 'url(' + data + ')';
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
    });
</script>


</html>